package elements.menu ;

import flash.display.Sprite;
import flash.events.MouseEvent;
import elements.menu.MenuItem;
import caurina.transitions.Tweener;
import caurina.transitions.Equations;
import string.Utils;
import flash.filters.DropShadowFilter;
import ColorConverter.Color;

class Menu extends Sprite {
	
		var original_alpha: Float;
		var props:Properties;
		var first_showing:Bool;
		var hidden_pos: Float;
	
	public function new( chartID:String, json:Dynamic ) {
		super();
		this.props = new DefaultMenuProperties(json);
		
		this.original_alpha = 0.4;
		this.alpha = 1;
		
		var pos: Float = 5;
		var height: Float = 0;
		this.first_showing = true;
		
		if (Reflect.hasField(json,'values') && Std.is(json.values, Array))
		{
			var json_values : Array<Dynamic> = Reflect.field(json,"values");
			for ( val in json_values )
			{
				var tmp:DefaultCameraIconProperties = new DefaultCameraIconProperties(val);
				var menu_item:MenuItem = MenuItemFactory.make(chartID, tmp);
				menu_item.x = 5;
				menu_item.y = pos;
				this.addChild(menu_item);
				height = menu_item.y + menu_item.height + 5;
				pos += menu_item.height + 5;
			}
		}
		
		var width: Float = 0;
		
		for ( i in 0...this.numChildren )
			width = Math.max( width, this.getChildAt(i).width );
		
		this.draw(width+10, height);
		this.hidden_pos = height;
		
		/*
		var dropShadow:DropShadowFilter = new flash.filters.DropShadowFilter();
		dropShadow.blurX = 4;
		dropShadow.blurY = 4;
		dropShadow.distance = 4;
		dropShadow.angle = 45;
		dropShadow.quality = 2;
		dropShadow.alpha = 0.5;
		// apply shadow filter
		this.filters = [dropShadow];
		*/
		
		
		this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
		this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
	}
	
	function draw(width: Float, height: Float): Void {
		
		this.graphics.clear();
		
		var color: Color = Hex(this.props.get('color')); //string.Utils.get_color( this.props.get('color') );
		var onclickolor: Int = ColorConverter.toInt(
			Hex(
				this.props.get('outline-color'))); //string.Utils.get_color( this.props.get('outline-color') );
		
		this.graphics.lineStyle( 1, onclickolor );
		this.graphics.beginFill(ColorConverter.toInt(color), 1);
		this.graphics.moveTo( 0, -2 );
		this.graphics.lineTo( 0, height );
		this.graphics.lineTo( width-25, height );
		this.graphics.lineTo( width-20, height+10 );
		this.graphics.lineTo( width, height+10 );
		this.graphics.lineTo( width, -2 );
		this.graphics.endFill();
		
		// arrows
		this.graphics.lineStyle( 1, onclickolor );
		this.graphics.moveTo( width-15, height+3 );
		this.graphics.lineTo( width-10, height+8 );
		this.graphics.lineTo( width-5, height+3 );
		
		this.graphics.moveTo( width-15, height );
		this.graphics.lineTo( width-10, height+5 );
		this.graphics.lineTo( width-5, height );
		
	}
	
	public function mouseOverHandler(event:MouseEvent):Void {
		Tweener.removeTweens(this);
		Tweener.addTween(this, { y:0, time:0.4, transition:Equations.easeOutBounce } );
		Tweener.addTween(this, { alpha:1, time:0.4, transition:Equations.easeOutBounce } );
	}

	public function mouseOutHandler(event:MouseEvent):Void {
		this.hide_menu();
	}
	
		function hide_menu(): Void
	{
		Tweener.removeTweens(this);
		Tweener.addTween(this, { y:-this.hidden_pos, time:0.4, transition:Equations.easeOutBounce } );
		Tweener.addTween(this, { alpha:this.original_alpha, time:0.4, transition:Equations.easeOutBounce } );
	}
	
	public function resize(): Void {
		
		if ( this.first_showing ) {
			this.y = 0;
			this.first_showing = false;
			Tweener.removeTweens(this);
			Tweener.addTween(this, { time:3, onComplete:this.hide_menu } );
		}
		else {
			this.y = -(this.height) + 10;
		}
		this.x = this.stage.stageWidth - this.width - 5;
		
	}
}
